<template>
	<!-- 首页-->
	<view class="coupon-item global-shadow" :class="active?'active':'unactive'">
		<view class="discount-money">
			<view class="price" v-if="coupon.discountType===0">
				<!-- 优惠券钱数 -->
				<text class="unit">¥</text>
				<text class="money">{{coupon.discountMoney/100}}</text>
			</view>
			<!-- 几折的折扣包括优惠券类型进行相应的展示 -->
			<view class="price" v-else-if="coupon.discountType===1">
				<text>{{coupon.discountRate/10}}</text>
				<text class="unit">折</text>
			</view>
			<view class="price" v-else-if="coupon.discountType===2">
				<text>包邮</text>
			</view>
			<view class="price small" v-else-if="coupon.discountType===3">
				<text>兑换券</text>
			</view>
			<view class="type">
				<text v-if="coupon.discountType===0">优惠券</text>
				<text v-else-if="coupon.discountType===1">折扣券</text>
				<text v-else-if="coupon.discountType===2">运费券</text>
				<text v-else-if="coupon.discountType===3">兑换券</text>
			</view>
		</view>
		<!-- 优惠券显示的标题 -->
		<view class="detail">
			<view class="title">
				<text>{{coupon.title}}</text>
			</view>
			<view class="label">
				<!-- <text v-if="coupon.usableRangeType === 0">通用</text>
				<text v-else-if="coupon.usableRangeType === 1">指定盲盒可用</text>
				<text v-else-if="coupon.usableRangeType === 2">指定商品可用</text>
				<text v-else-if="coupon.usableRangeType === 3">指定VIP套餐</text>
				<text v-else-if="coupon.usableRangeType === 4">指定活动</text> -->
				<!-- 中间的图标标题内容 -->
				<text>{{coupon.usableRangeText}}</text>
			</view>
			<view class="label" v-if="coupon.scorePrice">
				<text v-if="coupon.scorePrice">{{coupon.scorePrice}}{{scoreAlias}}兑换</text>
			</view>
			<view class="valid-date">
				<text v-if="coupon.timeLimitType == 0">{{validDateStr}}</text>
				<!-- 最下方得灰色字体，领取后的有效时间 -->
				<text v-else-if="coupon.timeLimitType == 1">领取后{{coupon.validTime}}小时内有效</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "CouponItem",
		props: {
			coupon: {
				type: Object,
				default() {
					return {}
				}
			},
			active: {
				type: Number,
				default: 1
			},
			activeText: {
				type: String,
				default: '立即使用'
			},
			unActiveText: {
				type: String,
				default: '已使用'
			}
		},
		computed: {
			validDateStr() {
				if (!this.coupon)
					return ''
					
				if (this.coupon.timeLimitType != 0)
						return ''
					
				return this.coupon.usableStartAt.substr(0, 10) + ' 至 ' + this.coupon.usableEndAt.substr(0, 10)
				// let usableStartAt = this.coupon.usableStartAt
				// let usableEndAt = this.coupon.usableEndAt
				// if (!usableEndAt) return ''
				// let start = moment(usableStartAt)
				// let end = moment(usableEndAt)
				// let now = new Date()
				// if (start > now || end < now) {
				// 	return start.format("YYYY.MM.DD") + ' - ' + end.format("MM.DD")
				// } else {
				// 	let d = end.diff(now, 'days')
				// 	if (d < 1) {
				// 		return (end.diff(now, 'h') + 1 ) + '小时后过期'
				// 	} else {
				// 		return d + 1 + '天后过期'
				// 	}
				// }
			}
		},
		methods: {
			click() {
			}
		}
	}
</script>

<style lang="scss">
	.coupon-item {
		background-color: #fff;
		border-radius: 10upx;
		overflow: hidden;
		display: flex;
		align-items: center;
		margin-top: 16rpx;
		
		&:last-child {
			margin-bottom: 16rpx;
		}
		
		&.unactive {
			.discount-money {
				color: #A5A7B2;
			}
			
			.detail {
				color: #A5A7B2;
			}
			
			.action .btn {
				background-color: #BBBBBB;
				color: #fff;
			}
		}
		
		&.active {
			.discount-money {
				color: #e52302;
			}
			.action .btn {
				background-color: #f52302;
				color: #fff;
			}
		}
		
		.discount-money {
			width: 180upx;
			height: 180upx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			border-right: 1px dashed #e1e1e1;
			margin-right: 20upx;
		
			.price {
				font-size: 50upx;
				font-weight: 500;
				
				.unit {
					font-size: 24upx;
				}
				
				&.small {
					font-size: 40rpx;
				}
			}
			
			.type {
				margin-top: 6upx;
				font-size: 22upx;
			}
		}
		
		.detail {
			flex: 1;
			.title {
				font-size: 30upx;
				display: flex;
				font-size: 500;
				align-items: center;
			}
			.label {
				padding: 0 12upx;
				height: 32upx;
				line-height: 32upx;
				font-size: 20upx;
				margin-left: 8upx;
				color: #F27233;
				position: relative;
				border: 1px solid #F27233;
				display: inline;
				border-radius: 30rpx;

			}
			.valid-date {
				font-size: 24upx;
				color: #999;
				margin-top: 10upx;
			}
			.limit-type {
				font-size: 22upx;
				margin-top: 10upx;
			}
		}
		
		.icon-arrow-right {
			font-size: 46rpx;
			margin-right: 10rpx;
			color: gray;
		}
		
		.action {
			width: 180upx;
			display: flex;
			justify-content: center;
			
			view {
				width: 130upx;
				line-height: 44upx;
				font-size: 22upx;
				text-align: center;
				border-radius: 1000upx;
			}
		}
	}
</style>
